<template>
    <div class="editText">
        <div class="filter_box2" v-show="screenSwitch2" v-loading="screenSwitch2" element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        </div>
        <div class="header">
            <!-- <p class="goback" @click="goback()">
                <img src="../../static/img/left-2.png" alt="">
            </p> -->
            <p class="title">编辑文字</p>
        </div>
        <div class='imgBox'>
            <div class="backImg" :style="{backgroundImage:cartInfo.bgImg,backgroundRepeat:'no-repeat' }" ref="imgBoxBgImg">
                <div class="text">
                    <p class="text_con" ref="textCon">{{cartInfo.text}}</p>
                    <p class="autograph" ref="autograph">{{cartInfo.autograph}}</p>
                </div>
            </div>
            <div class="liBottom">
                <div class="liText">
                    <p class="liTtitle">大家好 我是{{cartInfo.nickname}}</p>
                    <p class="liDes">我将以公益之心服务人民</p>
                    <p class="liDes">以文明作城市之魂奉献社会</p>
                </div>
                <div class="QRcode" ref="qrcode">
                    <img :src="qrcodeImg" alt="">
                </div>
            </div>
        </div>
        <div class="selectText">
            <div class="selectTitle">
                <p class="selectTitleItem" :class="{'active':titleItemIndex===0}" @click="selectType(0)">选金句</p>
                <p class="selectTitleItem" :class="{'active':titleItemIndex===1}" @click="selectType(1)">自己写</p>
            </div>
            <div class="selectContent">
                <ul class="selectList" v-if="titleItemIndex===0">
                    <li class="selectItem" v-for="(item,index) in textList" :key="index" @click="selectItem(index)" ref="selectText">
                        <img class="radio " v-if="itemIndex==index" src="../../static/img/cercle.png" alt="">
                        <img class="radio " v-else src="../../static/img/cercle1.png" alt="">
                        <!-- <div class="radio " :class="{'radioActive':itemIndex==index}">
                            <p class="radioCenter"></p>
                        </div> -->
                        <p class="selectItemText">{{item.text}}
                            <font class="selectAutograph">{{item.autograph}}</font>
                        </p>
                    </li>
                </ul>
                <div class="textareaBox" v-if="titleItemIndex===1" @click="inputFouce()" ref="textareaBox">
                </div>
                <div class="textarea_con" v-show="showInput">
                    <textarea class="textarear" type="text" maxlength="30" rows="1" v-model="inputVal" ref="textarear" @keyup.enter="inputTarea()" @keyup.delete="deleteRow()"></textarea>
                    <p class="filishBtn" v-if="inputVal.length>0" @click="filishBtn">完成</p>
                    <p class="cansole" v-else @click="cancelBtn">取消</p>
                </div>
                <!-- <textarea class="textarear" autocomplete="off" v-if="titleItemIndex===1" name="" id="" cols="30" rows="4" maxlength="30"></textarea> -->
            </div>
        </div>
        <p class="nextBtn" @click="downLoadImg()">一键生成</p>
        <div id="canvasImg"></div>
    </div>
</template>
<script>
    export default {
        name: "editText",
        data() {
            return {
                token: localStorage.getItem("token") ? localStorage.getItem("token") : "",
                tokenParams: {
                    token: localStorage.getItem("token") ?
                        localStorage.getItem("token") : ""
                },
                cartInfo: {
                    bgImg: '',
                    nickname: '',
                    text: '',
                    autograph: '',
                },
                qrcodeImg:'',
                textList: [{
                        text: '每一个不曾起舞的日子，都是对生命的辜负。',
                        autograph: '——尼采',
                    },
                    {
                        text: '哪里会有人喜欢孤独，不过是不喜欢失望。',
                        autograph: '——村上春树',
                    },
                    {
                        text: '你记得也好，最好你忘掉，在这交会时互放的光亮。',
                        autograph: '——徐志摩"',
                    },
                    {
                        text: '令她反感的，远不是世界的丑陋，而是世界所戴的漂亮面具。',
                        autograph: '——米兰·昆德拉',
                    },
                    {
                        text: '每一个不曾起舞的日子，都是对生命的辜负。',
                        autograph: '——尼采',
                    },
                    {
                        text: '哪里会有人喜欢孤独，不过是不喜欢失望。',
                        autograph: '——村上春树',
                    },
                    {
                        text: '你记得也好，最好你忘掉，在这交会时互放的光亮。',
                        autograph: '——徐志摩"',
                    },
                    {
                        text: '令她反感的，远不是世界的丑陋，而是世界所戴的漂亮面具。',
                        autograph: '——米兰·昆德拉',
                    },
                ],
                titleItemIndex: 0,
                itemIndex: 0,
                inputVal: '',
                showInput: false,
                screenSwitch2: false,
            }
        },
        created() {
            this.getCartInfo();
            this.getQrcodeImg();
        },
        methods: {
            getCartInfo() {
                if (localStorage.getItem('cartInfo')) {
                    this.cartInfo = JSON.parse(localStorage.getItem('cartInfo'))
                }
            },
            goback() {
                this.$router.push('/wx/editImg')
            },
            selectType(typeNum) {
                this.titleItemIndex = typeNum;
            },
            selectItem(index) {
                this.itemIndex = index;
                this.cartInfo.text = this.textList[index].text;
                this.cartInfo.autograph = this.textList[index].autograph;
            },
            inputFouce() {
                this.showInput = true;
            },
            filishBtn() {
                this.showInput = false;
                let textareaBox = this.$refs.textareaBox;
                textareaBox.innerText = this.inputVal;
                this.cartInfo.text = this.inputVal;
                this.cartInfo.autograph = '';
            },
            cancelBtn() {
                this.showInput = false;
            },
            /*获取二维码图片*/
            getQrcodeImg(){
                this.axios.post(this.APIHOST + "home/appQrcode", this.tokenParams).then(r=>{
                    if(r.data){
                        this.qrcodeImg=r.data.data
                    }else{
                        this.qrcodeImg=require('../../static/img/qrcode.jpg')
                    }
                })
            },
            /*输入框增行 */
            inputTarea() {
                let textarear = this.$refs.textarear;
                textarear.rows += 1;
                let textarearVal = textarear.value;
                let textArr = textarearVal.split('\n');
            },
            /*输入框减行 */
            deleteRow() {
                let textarear = this.$refs.textarear;
                let textarearVal = textarear.value;
                let cv = '';
                let n;
                if ('selectionStart' in textarear) {
                    cv = textarearVal.substr(0, textarear.selectionStart);
                } else {
                    let oSel = document.selection.createRange();
                    oSel.moveStart('character', -t.value.length);
                    cv = oSel.text;
                }
                let cl = cv.split('\n').length - 1;
                n = cl;
                let textArr = textarearVal.split('\n');
                if (textArr[n] == '') {
                    if (textarear.rows !== 1) {
                        textarear.rows -= 1;
                    }
                }
            },
            /*保存图片到本地 */
            downLoadImg() {
                let _self = this;
                this.screenSwitch2 = true;
                let canvasImg = document.querySelector("#canvasImg");
                let activeBox = document.querySelector(".imgBox");
                let activeBoxWidth = activeBox.offsetWidth;
                let activeBoxHeight = activeBox.offsetHeight;
                setTimeout(() => {
                    let createdImg = document.querySelectorAll(".createdImg");
                    if (createdImg) {
                        createdImg.forEach(item => {
                            canvasImg.removeChild(item);
                        });
                    }
                    _self
                        .html2canvas(activeBox, {
                            scale: 2,
                            logging: false,
                            useCORS: true
                        })
                        .then(canvas => {
                            let img = new Image();
                            img.src = canvas.toDataURL("image/jpeg");
                            img.setAttribute("class", "createdImg");
                            img.setAttribute("width", activeBoxWidth);
                            img.setAttribute("height", activeBoxHeight);
                            canvasImg.appendChild(img);
                            let uploadParams = {
                                file: img.src,
                                token: this.token
                            };
                            _self.axios
                                .post(_self.APIHOST + "upload/uploadFile", uploadParams)
                                .then(r => {
                                    if (r.data.code == "0") {
                                        _self.imgUrl = r.data.data.path2;
                                        _self.screenSwitch2 = false;
                                        _self.clickOnce = 1;
                                        setTimeout(function() {
                                            localStorage.setItem('cavasImg',r.data.data.path2);
                                            _self.$store.commit('setCartInfo',_self.cartInfo);
                                            _self.$message.success("制作成功");
                                            _self.$router.push({path:'/wx/shareImg',query:{editFilish:'editFilish'}});
                                        }, 500);
                                    } else {
                                        this.$message.error("生成失败，请稍后重试");
                                        setTimeout(() => {
                                            _self.screenSwitch2 = false;
                                        }, 1000);
                                    }
                                })
                                .catch(res => {
                                    this.$message.error("出错啦,请稍后再试");
                                    setTimeout(() => {
                                        if (_self.screenSwitch2 == true)
                                            _self.screenSwitch2 = false;
                                    }, 1000);
                                });
                        });
                }, 100);
                let bgImage = activeBox.children[0].style.backgroundImage;
                let imgNameList = bgImage.split("/")
                let imgName = imgNameList[imgNameList.length - 1]
                this.bgName = imgName.split('")')[0];
            },
        }
    }
</script>
<style lang="less" scoped>
    @import url(../assets/less/public.less);
    .editText {
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 4%;
            height: 70px;
            border-bottom: 1px solid #cccccc;
            .goback {
                width: 30px;
                img {
                    width: 100%;
                }
            }
            .title {
                flex-grow: 1;
                text-align: center;
            }
        }
        .filter_box2 {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 100vh;
            @flex();
            @justify2();
            flex-direction: column;
            z-index: 9;
        }
        .imgBox {
            width: 500px;
            margin: 20px auto;
            height: 660px;
            border-radius: 20px;
            overflow: hidden;
            background: @config_bg1;
            position: relative;
            @inputTextarea();
            box-shadow: 0 5px 25px 0 rgba(201, 206, 210, 0.4);
            .backImg {
                height: 507px;
                width: 100%;
                background-size: 100%;
                display: table;
                background-repeat: no-repeat;
                display: flex;
                align-items: center;
                position: relative;
                .text {
                    box-sizing: border-box;
                    padding: 0 4%;
                    color: #ffffff;
                    position: absolute;
                    top: 15vh;
                    .text_con {

                        @font16();
                        text-align: left;
                    }
                    .autograph {
                        text-align: right;
                    } // position: absolute;
                    // top: 30%;
                }
            }
            .liBottom {
                @flex();
                @justify5();
                padding: 20px 40px;
                box-sizing: border-box;
                .liText {
                    text-align: left;
                    .liTtitle {
                        @font14();
                        @color_4();
                        margin-bottom: 10px;
                    }
                    .liDes {
                        @font12();
                        @color_5();
                        line-height: 1.6em;
                    }
                }
                .QRcode {
                    width: 118.8px;
                    height: 118.8px;
                    background: @config_bg2;
                    overflow: hidden;
                    img {
                        width: 100%;
                    }
                }
            }
        }
        .selectText {
            padding: 0 4%;
            box-sizing: border-box;
            margin-bottom: 40px;
            .selectTitle {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border: 1px solid #4491f5;
                width: 300px;
                border-radius: 6px;
                .selectTitleItem {
                    color: #333333;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    width: 150px;
                }
                .active {
                    background: #4491f5;
                    color: #ffffff;
                }
            }
            .selectContent {
                background: #eeeeee;
                padding: 20px 10px;
                height: 150px;
                overflow-y: scroll;
                .selectList {
                    .selectItem {
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        margin-bottom: 15px;
                        .radio {
                            width: 24px;
                            height: 24px;
                            margin-right: 20px;
                            margin-top: 10px;
                        }
                        .radioActive {
                            border: 0px;
                            background: #4491f5;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .radioCenter {
                                width: 6px;
                                height: 6px;
                                background: #eeeeee;
                                border-radius: 6px;
                            }
                        }
                        .selectItemText {
                            flex-grow: 1;
                            text-align: left;
                            word-break: break-all;
                        }
                        .selectAutograph {
                            float: right;
                        }
                    }
                }
                .textareaBox {
                    width: 90%;
                    height: 140px;
                    border: 1px solid #999999;
                    margin: 0 auto;
                    background: #ffffff;
                    text-align: left;
                    box-sizing: border-box;
                    padding: 10px;
                }
                .textarea_con {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 14px 4%;
                    box-sizing: border-box;
                    position: fixed;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: #eeeeee;
                    .filishBtn {
                        background: #4491f5;
                        color: #ffffff;
                        padding: 0 10px;
                        border-radius: 6px;
                        box-sizing: border-box;
                    }
                    .cansole {
                        box-sizing: border-box;
                        padding: 0 10px;
                        border: 1px solid #aaaaaa;
                        border-radius: 6px;
                    }
                    .textarear {
                        outline: none;
                        border-radius: 6px;
                        border: 1px solid #999999;
                        flex-grow: 1;
                        margin-right: 16px;
                    }
                } // .textarear{
                //     width: 90%;
                //     outline: none;
                //     box-sizing: border-box;
                //     padding: 12px 10px;
                // }
            }
        }
        .nextBtn {
            width: 80%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #ffffff;
            background: #4491f5;
            margin: 0 auto;
            border-radius: 60px;
        }
        #canvasImg {
            width: 0;
            height: 0;
            overflow: hidden;
        }
    }
</style>


